<template>
  <div>
    <!-- 抢单 -->
    <van-tree-select height="550vw"
                     :items="items"
                     :main-active-index.sync="actives">
      <template #content>
        <!-- 维保单 -->
        <div v-if="actives === 0"
             class="Maintenance">
          <div class="examine">
            <div style="margin:12px 0 0 5px;color:rgb(16, 125, 237);">维修单号：</div>
            <div>
              <van-swipe-cell style="margin-top:8px;">
                <template #left>
                  <!-- <van-button square
                                type="primary"
                                text="选择" /> -->
                </template>
                <van-cell :border="false"
                          title="单号:xxxxxx" />
                <template #right>
                  <van-button square
                              type="primary"
                              text="接单" />
                  <van-button square
                              type="primary"
                              text="查看详单" />
                </template>
              </van-swipe-cell>

              <van-swipe-cell style="margin-top:8px;">
                <template #left>
                  <!-- <van-button square
                                type="primary"
                                text="选择" /> -->
                </template>
                <van-cell :border="false"
                          title="单号:xxxxxx" />
                <template #right>
                  <van-button square
                              type="primary"
                              text="接单" />
                  <van-button square
                              type="primary"
                              text="查看详单" />
                </template>
              </van-swipe-cell>
            </div>
          </div>
        </div>
        <!-- 已完成单 -->
        <div v-if="actives === 1"
             @click="chakan">
          <div class="history">
            <div class="wx1">保</div>
            <div class="wx2">
              <div style="display:flex;margin: 2px 8px 0 0;">保养单单号：</div>
              <div style="display:flex;margin: 2px 8px 0 0;">日期：</div>
              <div style="display:flex;float:right;margin: -22px 8px 0 0;">查看>></div>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
    <Footer page="index"></Footer>

  </div>
</template>

<script>
import Vue from 'vue'
import Footer from '@/components/Footer'
import { Sidebar, SidebarItem } from 'vant'

import { TreeSelect } from 'vant'
import { Divider } from 'vant'
Vue.use(TreeSelect)
Vue.use(Divider)

import { SwipeCell } from 'vant'
Vue.use(SwipeCell)

export default {
  // components: {
  //   [Tab.name]: Tab,
  //   [Tabs.name]: Tabs
  // },
  components: {
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    Footer
  },
  data() {
    return {
      active: 0,
      list: [],
      list2: [],
      activeKey: 0,
      actives: 0,
      items: [{ text: '维修单' }, { text: '保养单' }]
    }
  },
  created() {
    let index = this.active + 1
    this.list = this[`list${index}`] // this.list1
    // this.getGoods();
  },
  methods: {
    onchange(index) {
      // console.log(index, 'index', this.active, 'active')
      this.list = this[`list${index + 1}`]
    },
    onChange2(index) {
      // 弹框提示：
      // Notify({ type: 'primary', message: index })
    },

    getGoods() {
      let url = '/goods' // /api/goods
      this.$axios
        .get(url)
        .then(res => {
          console.log('res', res)
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    // 点击查看详情
    WorksheetClick() {
      // console.log('点击查看详情') // 跳转
      this.$router.push('/Received')
    },
    // 已完成单查看详情
    chakan() {
      this.$router.push('/details')
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>